<!-- 自动化管理 -->
<template>
  <el-form :model="form" class="demo-form-inline" :inline="true">
    <el-form-item label="模板名称">
      <el-input v-model="form.auto_tmp_name" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit"
        ><el-icon><Search /></el-icon> 搜索</el-button
      >
      <el-button @click="rest"
        ><el-icon><Refresh /></el-icon>重置</el-button
      >
    </el-form-item>
  </el-form>
  <!-- 身体 -->
  <div style="padding-top: 20px">
    <!-- 左边dialog弹出框 -->
    <div style="float: left">
      <el-button type="primary" @click="getSonComponent">新增自动化模板</el-button>
    </div>

    <!-- 中间tabel内容显示 -->
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      show-overflow-tooltip
    >
      <el-table-column type="selection" />
      <el-table-column property="auto_tmp_name" label="模板名称" align="center"> </el-table-column>
      <!-- <el-table-column property="status" label="状态" show-overflow-tooltip align="center">
        <div>离线</div>
      </el-table-column> -->
      <el-table-column property="id" label="模板id" show-overflow-tooltip align="center" />
      <el-table-column property="status" label="启用模板" show-overflow-tooltip align="center">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            inline-prompt
            active-text="使用中"
            inactive-text="未使用"
            active-value="AUTO_TMP_STATUS_INUSE"
            inactive-value="AUTO_TMP_STATUS_UNUSED"
            @change="openAuto(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column property="remark" label="备注" align="center" />
      <el-table-column label="操作" show-overflow-tooltip align="center">
        <template #default="scope">
          <el-popover trigger="hover" placement="left" :width="260" @hide="dds">
            <template #reference>
              <el-link
                :underline="false"
                style="margin-right: 10px"
                @click="scope.row.visible = true"
                >复制</el-link
              >
            </template>
            <el-input v-model="NewTmpName" placeholder="请输入复制模板名称"></el-input>
            <div style="float: right; margin: 1%">
              <!-- <el-button @click="Cancel(scope.row)">取消</el-button> -->
              <el-button @click="Submit(scope.row)" type="primary">确定</el-button>
            </div>
          </el-popover>

          <el-link :underline="false" @click="modify(scope.row)" style="margin-right: 10px"
            >修改</el-link
          >
          <el-popconfirm
            width="220"
            confirm-button-text="是"
            cancel-button-text="否"
            title="是否确认删除"
            @confirm="del(scope.row.id)"
          >
            <template #reference>
              <el-link :underline="false">删除</el-link>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-pagination
    style="float: right"
    v-model="currentPage"
    :total="totalItems"
    :page-size="pageSize"
    @current-change="handleCurrentChange"
  ></el-pagination>
  <ScenariosAutomation ref="ScenariosAutomation" @update="getNewList"></ScenariosAutomation>
  <ChangAuto ref="ChangAutoRef" @update="getNewList"></ChangAuto>
</template>

  <script>
// 灯id  + 状态 0开 1关
// 灯对应针脚

// 执行条件 设备  为1
// 动作 设备  为2

// isshow 0为false  1为true
// action 判断 开和关 带不带停
import { defineComponent, ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import ScenariosAutomation from './ScenariosAutomation.vue'
import ChangAuto from './ChangAuto.vue'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'Autoation',
  components: {
    ScenariosAutomation,
    ChangAuto
  },
  setup() {
    // 顶部输入框
    const form = reactive({
      auto_tmp_name: ''
    })

    // 保存到vuex
    const store = useStore()

    // 中间显示的table数据
    const tableData = ref(null)

    // 搜索成功返回的值
    const Searchlist = ref(null)

    // 用于搜索拼接的值
    const seachValue = ref({ auto_tmp_name: null })

    // 修改表单 实例对象
    const ChangAutoRef = ref(null)
    // 子组件实例对象
    const ScenariosAutomation = ref(null) // 通过 ref 绑定子组件

    // 新模板名称
    const NewTmpName = ref('')
    // 气泡框显示隐藏
    const visible = ref(false) //

    // 当前页数
    const currentPage = ref(null)
    // 总条数
    const totalItems = ref(null)
    //  每页显示的条目数
    const pageSize = ref(null)
    // 总页数
    const totalPages = ref(null)
    // 搜索分页的值
    const page = ref(0)
    const pagesize = ref(10)

    // 搜索
    const onSubmit = () => {
      // 搜索
      if (form.auto_tmp_name) {
        seachValue.value.auto_tmp_name = `${form.auto_tmp_name.trim()}`
      }
      getSeachList()
      tableData.value = Searchlist.value
    }

    // 重置
    const rest = () => {
      seachValue.value = {}
      form.auto_tmp_name = ''
      getSeachList()
      tableData.value = Searchlist.value
      // 设备页面 table
      let listDvcAndDvcVer = window.api.listDvcAndDvcVer()
      store.commit('beforeAllDeviceupdate', JSON.parse(listDvcAndDvcVer))
      listDvcAndDvcVer = null
    }
    // 初始化数据列表
    const getList = onMounted(() => {
      rest()
    })

    // 分页按钮
    const handleCurrentChange = (newPage) => {
      page.value = newPage - 1
      getSeachList()
      tableData.value = Searchlist.value
    }

    // 搜索函数  数据解析
    const getSeachList = () => {
      tableData.value = []
      Searchlist.value = []
      const res = window.api.pageAutoTmp(
        `${JSON.stringify(seachValue.value)}`,
        page.value,
        pagesize.value
      )
      const result = res?.getPageSync()
      const pageSize1 = res?.getPageSizeSync()
      const totalPage = res?.getTotalPageSync()
      const total = res?.getTotalSync()
      const size = res?.sizeSync()
      // 当前页
      currentPage.value = result
      // 每页数量
      pageSize.value = pageSize1
      // 总条数
      totalItems.value = total
      // 总页数
      totalPages.value = totalPage

      for (let i = 0; i < size; i++) {
        const result = res?.getSync(i)
        const id = result.getSync('id')
        const auto_tmp_name = result.getSync('auto_tmp_name')
        const remark = result.getSync('remark')
        const status = result.getSync('status')

        let list = {
          id: id,
          auto_tmp_name: auto_tmp_name,
          remark: remark,
          status: status
        }
        Searchlist.value.push(list)
      }
    }

    // 新增按钮
    const getSonComponent = () => {
      ScenariosAutomation.value.dialogVisible = true
    }

    // 修改
    const modify = (data) => {
      const result = window.api.getAutoTmpById(data.id)
      if (result) {
        ChangAutoRef.value.ruleForm = JSON.parse(result)
        ChangAutoRef.value.pushList(data.id)
      }
    }

    // 删除
    const del = (id) => {
      const res = window.api.removeAutoTmp(id)
      if (res === '删除成功') {
        ElMessage.success(res)
        const result = window.api.CUDAutoSchedule(JSON.stringify([]), id)
        if (result === '调整成功') {
          ElMessage.success(result)
        } else {
          ElMessage.error(result)
        }
      } else {
        ElMessage.error(res)
      }
      rest()
    }
    // 启用模板
    const openAuto = (data) => {
      if (data.status === 'AUTO_TMP_STATUS_INUSE') {
        const res = window.api.setRunAutoTmp(data.id)
        ElMessage.success(res)
        rest()
      } else {
        const res = window.api.cancelRunAutoTmp(data.id)
        ElMessage.success(res)
        rest()
      }
    }
    // 更新数据
    const getNewList = () => {
      rest()
    }

    // 复制模板
    const Copy = (data) => {}

    // 确定
    const Submit = (data) => {
      const res = window.api.copyAutoTmp(data.id, NewTmpName.value)
      ElMessage.success(res)
      data.visible = false
      NewTmpName.value = null
      rest()
    }

    // 取消
    const Cancel = (data) => {
      NewTmpName.value = null
      data.visible = false
      rest()
    }

    const dds = () => {
      NewTmpName.value = null
    }
    return {
      page,
      pagesize,
      Searchlist,
      form,
      tableData,
      getList,
      seachValue,
      totalPages,
      pageSize,
      totalItems,
      currentPage,
      ScenariosAutomation,
      ChangAutoRef,
      NewTmpName,
      visible,
      rest,
      getSonComponent,
      onSubmit,
      modify,
      del,
      handleCurrentChange,
      openAuto,
      getNewList,
      Copy,
      Submit,
      Cancel,
      dds
    }
  }
})
</script>
  
  <style lang="less" scoped>
</style>
  